<template>
    <div class="chooseTransfer">
        <search
        v-model="leaderName"
        position="absolute"
        auto-scroll-to-top
        @on-submit="onSubmit"
        placeholder="请输入姓名或账号"
        ref="search">
        </search>
        <div class="main_wrapper">
            <ul id="demo">
                <transfer-tree
                    class="item"
                    :item="treeData"
                    @get_user="getUser"
                ></transfer-tree>
            </ul>
        </div>
        <div class="footer">
            <div class="btn" @click="confirm()">确定</div>
        </div>
    </div>
</template>
<script>
    import { Search } from 'vux';
    import TransferTree from "../../components/common/transfer-tree.vue"; 
    import TaskDao from '@/daos/task_dao'
    let _this = null;
    export default {
        name:'chooseTransfer',
        components:{
            TransferTree,
            Search
        },
        data: function () {
            return {
            isOpen: false,
            department:{},
            treeData:{},
            leaderName:'',
            departmentId:null,
            userId:'',
            checkId:'',
            transferType:'',
            url:'',
            user:{}
            }
        },
        props:{
            options:Object
        },
        computed: {
            isFolder: function () {
                return this.item.children && this.item.children.length
            }
        },
        watch:{
            options:function(){
                this.getUserInfo();
            }
        },
        methods: {
            getUserInfo: function(){
                this.$http(this.$API.getUserInfo,{},true).then((res)=>{
                })
            },
            getOrganization: function(){
                this.$http(this.$API.listDepartmentUser,{nameOrAccount:'',departmentId:-1},true).then((data)=>{
                    this.treeData = data[0]
                })
            },
            getUser: function(data){
                this.user = data;
            },
            confirm: function () {
                this.$emit('getCharger',this.user.id,this.user.name)
            },
            onSubmit: function(){
                if(this.leaderName){
                    TaskDao.listDepartmentUserFlat(
                    {
                      name: this.leaderName
                    },(data)=>{
                        let tree = {
                            name:"选择转办人", 
                            children:data,
                        };
                        console.log(tree);
                        this.treeData = tree
                    });
                }else{
                    this.getOrganization();
                }
            }
        },
        created: function(){
            
        }
    }
</script>
<style lang="less" scoped>
    @import '../../styles/iconfont.css';
    .chooseTransfer{
        // position: absolute;
        // top: 45px;
        width: 100%;
        padding-bottom: 80px;
    }
    .main_wrapper{
        color: #fff;
        width: 100%;
        z-index: 999;
        font-size: 16px;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
    //   padding: 13px 0;
      font-size: 16px;
      line-height: 16px;
      color:#fff;
      .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 5px;
          height: 11px;
          margin-left: 15px;
        }
      }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        padding: 20px 0;
        background: #03061C;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        z-index:999;
        .btn {
            padding: 10px 35px;
            background: #3967DC;
            border-radius: 4px;
            margin-right: 16px;
            color:#fff;
            font-size: 16px;
        }
    }
    .iconfont{
        margin-right: 10px;
        font-size: 14px;
    }
    .name{
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .chooseTransfer /deep/ .vux-search-box{
      background-color: #22233f !important;
      position:static !important;
    }
    .chooseTransfer /deep/ .weui-search-bar, .weui-search-bar_focusing{
      background-color:#22233f !important;
    }
    .chooseTransfer /deep/ .weui-search-bar__cancel-btn{
      color:#fff !important;
    }
    .chooseTransfer /deep/ .weui-search-bar__label{
      top:4px !important;
      right: unset !important;
      left:10px !important;
    }
    /* .main_wrapper{
        padding-left:5px;
    } */
</style>
